<template>
  <el-header>
      <div style="display: flex;">
        <div class="logo">
            <a href="/#/home" class="l-content">
                <img style="width: 40px; height: 40px" src="../assets/image/logo.png" />
                <el-text class="mx-1" size="large">NoteWave</el-text>
            </a>
        </div>
        <div class="menu">
            <el-menu

                mode="horizontal"
                style="width:600px;border:0px;margin-left:10px;"
                >
                <el-menu-item index="1"><a href="/#/home">Home</a></el-menu-item>
                <el-menu-item index="2"><a href="/#/course">Course</a></el-menu-item>
                <el-menu-item index="3"><a href="/#/calendar">Calendar</a></el-menu-item>
                <el-menu-item index="4"><a href="/#/about">More</a></el-menu-item>
            </el-menu>
        </div>
      </div>
      <div class="r-content">
          <el-dropdown>
            <span class="el-dropdown-link logo">
                {{personname}}&nbsp;<img src="../assets/image/user.png"/>
            </span>
            <template #dropdown>
            <el-dropdown-menu>
                <el-dropdown-item><a href="/#/profile">profile</a></el-dropdown-item>
                <el-dropdown-item><a @click="logout()">logout</a></el-dropdown-item>
            </el-dropdown-menu>
            </template>
        </el-dropdown>
      </div>
  </el-header>
</template>
<script setup>

import { useStaffStore } from '../stores/staff'
import { useRouter,useRoute} from 'vue-router';
import { setToken} from '../utils/auth'
import { inject } from 'vue'
const currentRoute = useRouter()
const staffStore = useStaffStore()
const personname = staffStore.staff;
const isLoggedIn = inject('isLoggedIn')
function logout() {
    isLoggedIn.value = false;
    localStorage.setItem('isLoggedIn', 'false');
    //设置token
    setToken('');
    staffStore.setToken('');
    staffStore.setStaff(null);
    currentRoute.push('/')
}

</script>
<style lang="less" scoped>
header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0px 2px 2px -2px gray;
    margin-bottom: 10px;
}
.logo{
   display: flex;
    align-items: center;
}
.menu{
  display:inline;
}
.l-content{
    display: flex;
    align-items: center;
    font-weight: bold;
}
.r-content img{

    border-radius: 50%;
}
</style>